import {
  FC,
  useRef,
  RefObject,
  useEffect,
  CSSProperties,
  useState,
} from 'react';
import * as echarts from 'echarts/core';
import { SunburstChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([SunburstChart, CanvasRenderer]);
interface dataItem {
  name: string;
  value: number;
  children?: dataItem[];
}
const buildOptions = (data: dataItem[], rediusNumber: number) => {
  return {
    series: [
      {
        type: 'sunburst',
        redius: '50%',
        center: ['50%', '50%'],
        data: buildData(data, rediusNumber),
        label: {
          rotate: 'radial',
          color: '#fff',
          fontSize: 20,
        },
        itemStyle: {
          borderWidth: 2,
        },
        levels: [
          {},
          {
            r0: 0 - rediusNumber,
            r: 124 - rediusNumber,
            label: {
              rotate: 0,
              verticalAlign: 'middle',
            },
            itemStyle: {
              borderWidth: 5,
              borderColor: '#002673',
            },
          },
          {
            r0: 124 - rediusNumber,
            r: 207 - rediusNumber,
            itemStyle: {
              borderWidth: 5,
              borderColor: '#002673',
            },
          },
          {
            r0: 205 - rediusNumber,
            r: 215 - rediusNumber,
            itemStyle: {
              borderWidth: 5,
              borderColor: '#002673',
            },
            label: {
              position: 'outside',
              textShadowBlur: 5,
              distance: 5,
            },
          },
        ],
      },
    ],
  };
};
const areaColors: string[] = ['#00b5ff', '#0082ff', '#3b5fff', '#9562ff'];
const buildData = (data: dataItem[], rediusNumber: number) => {
  return data.map((first: dataItem) => ({
    name: first.name,
    value: first.value,
    itemStyle: {
      color: '#0375c1',
    },
    label: {
      formatter: ['{value|{c}}', '{unit|万元}'].join('\n'),
      rich: {
        value: {
          fontSize: 30,
          fontFamily: 'DIN-Alternate-Bold',
        },
        unit: {
          fontSize: 20,
        },
      },
      height: 130 - rediusNumber,
      position: [0, 0],
    },
    children: first.children
      ? first.children.map((second: dataItem, secondNumber: number) => ({
          name: second.name,
          value: second.value,
          itemStyle: {
            color: areaColors[secondNumber],
          },
          label: {
            formatter: ['{value|{b}}', '{unit|({c}万)}'].join('\n'),
            rich: {
              value: {
                fontSize: 18,
              },
              unit: {
                fontSize: 16,
              },
            },
            lineHeight: 28,
          },
          children: second.children
            ? second.children.map((third: dataItem) => ({
                name: third.name,
                value: third.value,
                itemStyle: {
                  color: areaColors[secondNumber],
                },
                label: {
                  formatter: '{name|{b}}',
                  rich: {
                    name: {
                      color: areaColors[secondNumber],
                      fontSize: 16,
                      fontWeight: 'bold',
                    },
                  },
                },
              }))
            : null,
        }))
      : null,
  }));
};

interface Iprops {
  style?: CSSProperties;
  width?: number;
  height?: number;
  dataSource: dataItem[];
  rediusNumber?: number;
}
/**
 * 旭日图
 * @param props
 * @param {CSSProperties} props.style 图表样式
 * @param {number} props.width 图表宽
 * @param {number} props.height 图表高
 * @param {Object} props.dataSource 图表数据
 * @param {number} props.rediusNumber 图表半径减值
 */
const Sunburst: FC<Iprops> = (props) => {
  const {
    style,
    width = 600,
    height = 600,
    dataSource,
    rediusNumber = 40,
  } = props;

  const chartRef = useRef() as RefObject<HTMLDivElement>;
  const [chart, setChart] = useState<echarts.ECharts>();

  useEffect(() => {
    const chartDom = chartRef.current as HTMLElement;
    const currentChart = echarts.init(chartDom);
    setChart(currentChart);
  }, []);

  useEffect(() => {
    chart && chart.setOption(buildOptions(dataSource, rediusNumber));
  }, [chart, dataSource, rediusNumber]);

  return (
    <div
      ref={chartRef}
      style={{
        ...style,
        width,
        height,
      }}
    ></div>
  );
};
export default Sunburst;
